<template>
  <div class="app-container">

    <el-form ref="spceForm" :model="spceForm" :rules="spceFormRules" label-width="140px" style="width: 80%">
      <el-form-item v-for="(productAttr,idx) in specKeyList" :key="idx" :label="productAttr.specName">
        <!-- 单选 -->
        <el-radio-group v-if="productAttr.specType==1" v-model="specKeyList[idx].value">
          <el-radio v-for="item in getSpecValueArray(productAttr.id)" :key="item.id" :label="item.id" class="littleMarginLeft">
            {{ item.label }}
          </el-radio>
        </el-radio-group>
        <!-- 多选 -->
        <el-checkbox-group v-if="productAttr.specType==2" v-model="specKeyList[idx].values">
          <el-checkbox v-for="item in getSpecValueArray(productAttr.id)" :key="item.id" :label="item.id" class="littleMarginLeft">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- 输入框 -->
        <el-input v-if="productAttr.specType==3" v-model="productAttr.value" auto-complete="off" />
      </el-form-item>
    </el-form>
  </div>

</template>

<script>

import { getMSpecValueListByClassifyId, getSpecVlueListByKeyIds, saveRela } from '@/api/modules/goodsInfo'

export default {
  name: 'GoodsSpecForm',
  components: { },
  directives: { },
  filters: {},
  props: {
    // 商品ID
    rowGoodsId: {
      type: String,
      required: true
    },
    // 商品分类ID
    rowClassifyId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      specKeyList: [],
      specValueList: [],
      spceFormRules: {},
      spceForm: {}
    }
  },
  created() {
    this.getSpecInfoByGoodsId()
  },
  methods: {

    // 根据商品id 获取销售属性列表
    getSpecInfoByGoodsId() {
      // 获取规格key
      const param = { classifyId: this.rowClassifyId, goodsId: this.rowGoodsId }
      getMSpecValueListByClassifyId(param).then(response => {
        const specKeyList = []
        const specKeyIds = []
        const res = response.data
        if (res == null || res === '' || res.length < 1) {
          this.$message({ message: '未查询到商品参数设置信息', type: 'error' })
          return
        }
        response.data.forEach(item => {
          let values = []
          let value = ''
          if (item.specType === 2) {
            values = JSON.parse(item.values)
          } else {
            if (item.values !== '[]') {
              value = item.values
            }
          }
          specKeyList.push({
            id: item.id,
            specName: item.specName,
            values: values,
            value: value,
            specType: item.specType
          })
          specKeyIds.push(item.id)
        })
        this.specKeyList = specKeyList
        // 通过规格keyIds 获取values
        const specKeyIdsStr = specKeyIds.join(',')
        getSpecVlueListByKeyIds({ keyIds: specKeyIdsStr }).then(response => {
          this.specValueList = response.data
        }).catch(() => {
        })
      }).catch(() => {

      })
    },

    getSpecValueArray(specKeyId) {
      const valueList = []
      this.specValueList.forEach(item => {
        if (item.speckeyId === specKeyId) {
          valueList.push({ id: item.id, label: item.value })
        }
      })
      return valueList
    },

    saveParamsForm() {
      const specKeyValueVoList = []
      this.specKeyList.forEach(item => {
        if (item.specType === 2) {
          if (item.values.length > 0) {
            specKeyValueVoList.push({
              speckeyId: item.id,
              specValue: JSON.stringify(item.values)
            })
          }
        } else {
          specKeyValueVoList.push({
            speckeyId: item.id,
            specValue: item.value
          })
        }
      })
      if (specKeyValueVoList.length === 0) {
        this.$message({ message: '请选择商品规格信息', type: 'error' })
        return
      }
      const param = { goodsId: this.rowGoodsId, specKeyValueVoList: JSON.stringify(specKeyValueVoList) }
      // 【API调用】
      saveRela(param).then(response => {
        this.$emit('paramsformcallback')// 只能用小写
      }).catch(() => {
        this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
      })
    }

  }
}

</script>
